<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>麦知网——学问有余，可为人师</title>

<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../css/non-responsive.css" rel="stylesheet">
<link href="../css/courseCreate.css" rel="stylesheet">    
<link href="../css/jCrop.css" rel="stylesheet">
<link href="../css/font-awesome.min.css" rel="stylesheet">
 
	
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="../js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../js/bootstrap.js"></script>
<script src="../js/jCrop.js"></script>
<script src="../js/classify.js"></script>	
<script src="../js/logout.js"></script>
</head>
<body style="background-color:#ffffff;">
	{% include 'public/common/header.html' %}
	<div class="container" style="margin-top:45px">
		<div class="row">
<!-- left div -->
			<div class="col-xs-8">
				<div>
					<div class="publisher_img pull-left">
						<img src="{{info.domain}}/{{info.img}}" width="100%" class="img-circle"/>
					</div>
					<div class="publisher_name pull-left">
						<div class="cc_title"><b>创建我的课程系列</b></div>
						<div class="publisher_sign"><i>我一共创建了{{mycourse}}个课程系列</i></div>
					</div>
					<div class="clearfix"></div>
				</div>
				<div>
					<div class="topdirection"></div>
					<div class="group_mes">
					<form action="{% url 'courses:coursecreate' %}" method="post" enctype="multipart/form-data" id="form">
						{% csrf_token %}
						<div class="group_form_all">
							<div class="group_form_name pull-left"> 课程系列名称 </div>
							<div class="group_form pull-left"><input class="form-control" id="courseName" type="text" name="name" onblur="len()" /></div>
							<div id='aletName'></div>
							<div class="clearfix"></div>
						</div>
						<div class="group_form_all">
							<div class="group_form_name pull-left"> 课程图片 </div>
							<div class="group_form pull-left"><input type="file" id="picture" name="picture"/></div>
							
							<div class="clearfix"></div>
						</div>
						<div class="group_form_all" id="cutimg" style="display:none;">
<!-- js cutimg begin -->
							<div id="show_cut" class="cutImgDiv">
								<div id="haha" class="pull-left" style="width:330px;overflow:hidden;">
									
								</div>
								<div class="pull-left previewwDiv" id="heihei">
									
								</div>
								<div class="clearfix"></div>
							</div>

<!-- js cutimg end -->

						</div>
						<div class="group_form_all">
							<div class="group_form_name pull-left"> 课程简介 </div>
							<div class="group_form group_form pull-left"><textarea class="form-control group_textarea" name="introduce"></textarea></div>
							<div class="clearfix"></div>
						</div>
						<div class="group_form_all">
							<div class="group_form_name pull-left"> 课程价格 </div>
							<div class="group_form pull-left">
								 {% ifequal method '1' %}
								<div class="input-group">
								  <span class="input-group-addon">￥</span>
								  <input type="text" name="price" class="form-control" value="{{price}}" disabled='disabled'>
								  <span class="input-group-addon">.00</span>
								  </div>
								  {% endifequal %}
								  {% ifequal method '0' %}
								  <div class="input-group">
								  <span class="input-group-addon">￥</span>
								  <input type="text" id="price" name="price" class="form-control" onblur="ifNum();">
								  <span class="input-group-addon">.00</span>
								  </div>
								  {% endifequal %}
							</div>
							<div class="clearfix"></div>
						</div>
						 {% ifequal method '1' %}
						<div class="group_form_all">
							<div class="group_form_name pull-left"> 课程密码 </div>
							<div class="group_form pull-left">
								
								<div class="input-group">
								  <input type="text" name="password" class="form-control" />
								</div>
								 
							</div>
							<div class="clearfix"></div>
						</div>
						 {% endifequal %}
						<input class="form-control" type="hidden" name="coordinate" id="hidden" />
						<div class="group_form_all">	
						
							<div class="right case4" id="case4">

								<div>
									{% ifequal method '1' %}
									<div class="input-group">
									  <input type="hidden" name="user" value="{{user}}" /> 
									  <input type="hidden" name="reward" value="{{reward}}" /> 
									  <input type="hidden" name="to" value="{{to}}" /> 
									</div>
									{% endifequal %}
									{% ifequal method '0' %}
									<div class="group_form_name pull-left"> 课程分类 </div>
									<div class="group_form pull-left">
										<div class="pull-left cc_sel">
											<select class="form-control" name="types" id="big" onchange="small()">
												<option value="0" selected>---请选择课程大分类---</option>
<!--一个大分类  循环开始处-->
												{% for j in tag %}
												<option value="{{j.id}}">{{j.name}}</option>
												{% endfor %}
<!--一个大分类  循环结束处-->
											</select>
										</div>
										<div class="pull-left cc_sel">
											<select class="form-control" name="tiny" id="tiny">
												<option value="0" selected>---请选择课程小分类---</option>
<!--一个小分类  循环开始处-->
										
<!--一个小分类  循环结束处-->
											</select>

										</div>
									
										<div class="clearfix"></div>

									</div>
								{% endifequal %}
									<div class="clearfix"></div>

									
									<div class="subbox">
										<input id="subbox" type="checkbox" onclick="sub()" checked>我已阅读并同意<a href="{% url 'users:agreement' 3 %}" target="_blank">麦知网课程协议</a>
									</div>
									<div>
										<div style="text-align:center;"><button id="subbutton3" type="button" onclick="refer()" class="btn btn-info">创建课程系列</button></div>
									</div>
								</div>
							</div>
<!-- 标签设置 结束处 -->
						</div>
					</form>
					</div>
				</div>
			</div>
<!-- 中间留白div -->

<!-- right div -->
			<div class="col-xs-4">
				<div class="agreement">
					<pre>
麦知提倡:

1. 平等、尊重和自由；
2. 宽容和理性地对待不同的看法、喜好和意见；
3. 尊重他人的隐私和个人空间。
麦知反对:

1. 针对种族、国家、民族、宗教、性别、年龄、地缘、性取向、生理特征的歧视和仇恨言论；
2. 不雅词句、人身攻击、故意骚扰和恶意使用；
3. 色情、激进时政、意识形态方面的话题。
麦知杜绝:

1. 违反中国或麦知成员所在地法律法规的行为和内容（相关政策法规）；
2. 威胁他人或麦知成员自身的人身安全、法律安全的行为；
3. 对网站的运营安全有潜在威胁的内容。
					</pre>
			</div>
		</div>
	</div>
<script type="text/javascript">
//JS FileReader获取上传图片并显示
function handleFileSelect(evt) {
	document.getElementById('cutimg').style.display='block';
	var files = evt.target.files; // FileList object
	// Loop through the FileList and render image files as thumbnails.
	for (var i = 0, f; f = files[i]; i++) {

	  // Only process image files.
	  if (!f.type.match('image.*')) {
	    continue;
	  }

	  var reader = new FileReader();

	  // Closure to capture the file information.
	  reader.onload = (function(theFile) {
	    return function(e) {
	      // Render thumbnail.
	      var haha=document.getElementById('haha')
	      var heihei=document.getElementById('heihei')
	      //var span = document.createElement('span');
	      haha.innerHTML = ['<img name="img1" id="targett" width="330px" src="', e.target.result,
	                        '" title="', escape(theFile.name), '"/>'].join('');
	      heihei.innerHTML = ['<img name="img2" id="previeww" src="', e.target.result,
	                        '" title="', escape(theFile.name), '"/>'].join('');
	      //document.getElementById('haha').insertBefore(span, null);
	      imgs=escape(e.target.result);
	      abc()
	      //var urls=document.images.item(img1).src;
	    };
	  })(f);
	  // Read in the image file as a data URL.
	  reader.readAsDataURL(f);
	}
}

document.getElementById('picture').addEventListener('change', handleFileSelect, false);
// 获取切图的坐标
function abc(){
	// Create variables (in this scope) to hold the API and image size
	var jcrop_api,boundx,boundy;
	
	$("#targett").Jcrop({
		setSelect:[0,0,100,100],//显示盖板DIV，控制盖板大小
		onChange:updatePreview,
		onSelect:updatePreview,
		aspectRatio:1//选框宽高比。说明：width/height
	},function(){
		// Use the API to get the real image size
		var bounds=this.getBounds();
		boundx=bounds[0];
		boundy=bounds[1];
		// Store the API in the jcrop_api variable
		jcrop_api=this;
	});
	
	function updatePreview(c){
		if(parseInt(c.w)>0){
			var rx=100/c.w;
			var ry=100/c.h;
			
			$("#previeww").css({
				width:Math.round(rx*boundx)+"px",
				height:Math.round(ry*boundy)+"px",
				marginLeft:"-"+Math.round(rx*c.x)+"px",
				marginTop:"-"+Math.round(ry*c.y)+"px"
			});
		}
	}
}

//话题 表单提交
function refer(){
	var courseName=document.getElementById('courseName').value;
	var price=document.getElementById('price').value;
	var picture=document.getElementById('picture').value;
	var tiny=document.getElementById('tiny').value;
	
	if (courseName.length>8) {
		alert('课程名过长！');		
		return ;
	} if (courseName=='') {
		alert('请输入课程名！');		
		return ;
	} if (price=='' || isNaN(price)) {
		alert('请输入正确的价格，价格必须为数字');		
		return ;
	} if (picture=='') {
		alert('请上传图片');		
		return ;
	}  if (tiny==0) {
		alert('请选择课程所属分类');		
		return ;
	} else {
		var upDiv=$(".jcrop-tracker");
		var img=$("#haha");
		var x0=upDiv.offset().left-img.offset().left;
		var x1=upDiv.offset().top-img.offset().top;
		var y0=x0+upDiv.width();
		var y1=x1+upDiv.height();
		document.getElementById('hidden').value=x0+"*"+x1+"*"+y0+"*"+y1;
		var form = document.getElementById('form');  
	    	form.submit();	
	}
	 
}

//是否同意协议
function sub(){
	$("#subbutton3").attr("id","subbutton1");
	$("#subbutton2").removeAttr("disabled");
	$("#subbutton1").attr("disabled","disabled");
	$("#subbutton2").attr("id","subbutton3");
	$("#subbutton1").attr("id","subbutton2");
}

//检测课程名长度
function len(){
	var courseName=document.getElementById('courseName').value;
	if (courseName.length>8) {
		document.getElementById('aletName').innerHTML="<span style='color:red;'>课程名过长！</span>";
		return false;
	}
}


</script>	
</body>
</html>